<template>
	<view>
		<view class="dhbox">
			<view class="kong"></view>
			<!-- tab栏 -->
			<view class="qh">
				<view v-for="(page, index) in pages" :key="index" class="qiu">
					<view :class="{'active': current === index}" @click="checked(index)">
						{{ page.title }}
					</view>
				</view>
			</view>
			<view class="kaijiang">开奖公告</view>
		</view>
		<!-- tab栏切换内容 -->
		<view v-if="current === 0" class="saishiqiehuan">
			<!-- tab栏 2-->
			<view class="tabbox">
				<view class="tab">竞彩</view>
				<view class="tab">北单</view>
				<view class="tab">足彩</view>
			</view>
			<view class="qh2">
				<view class="daybox">
					<view class="xq">周日</view>
					<view class="rq">08/11</view>
				</view>
				<view class="daybox">
					<view class="xq">周一</view>
					<view class="rq">08/12</view>
				</view>
				<view class="daybox">
					<view class="xq">周二</view>
					<view class="rq">08/13</view>
				</view>
				<view class="daybox">
					<view class="xq">周三</view>
					<view class="rq">08/13</view>
				</view>
			</view>
			<view class="bisai">
				<view class="riqi">
					<view class="text1">周二001.亚冠</view>
					<view class="text2">完场 08-13 20:00</view>
				</view>
				<view class="box">
					<view class="team">
						<view class="teamnr1">
							<view class="image1">
								<image class="img1" src="../../static/logo.png"></image>
							</view>
							<view class="text3">山东泰山</view>
						</view>
						<view class="teamnr2">
							<view class="text4">竞彩sp 2.50 3.20 2.40</view>
						</view>
					</view>
					<view class="bifen">
						<view class="text5">1:0</view>
						<view class="text6">上半场0:0</view>
					</view>
					<view class="team">
						<view class="teamnr1">
							<view class="image1">
								<image class="img1" src="../../static/logo.png"></image>
							</view>
							<view class="text3">曼谷联</view>
						</view>
						<view class="teamnr2">
							<view class="text4">主（-1）5.55 4.45 1.38</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="current === 1" class="saishiqiehuan">
			<view class="tabbox">
				<view class="tab">1</view>
				<view class="tab">2</view>
				<view class="tab">3</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, // 默认选中第一个tab
				pages: [{
						index: 0,
						title: '足球'
					},
					{
						index: 1,
						title: "篮球"
					}
				],
			};
		},
		methods: {
			checked(index) {
				this.current = index;
			}
		}
	};
</script>

<style>
	.dhbox {
		width: 96%;
		display: flex;
		background: red;
		border: 1px solid wheat;
		padding: 2%;
		justify-content: space-between;
	}

	.kong {
		width: 30%;
		height: 15px;
		/* background: yellow; */
	}

	.qh {
		display: flex;
		width: 40%;
		background-color: #e96867;
		border-radius: 30rpx;
		height: 50rpx;
		align-items: center;
	}

	.qiu {
		width: 50%;
		font-size: 30rpx;
		color: white;
		text-align: center;
		cursor: pointer;
	}

	.kaijiang {
		width: 26%;
		color: white;
		font-size: 30rpx;
		text-align: center;
		padding: 2%;
		cursor: pointer;
	}

	/* tab栏样式 */
	.tabbox {
		width: 94%;
		background-color: red;
		display: flex;
		padding: 3%;
		justify-content: space-around;
	}

	.tab {
		color: white;
		text-align: center;
		font-size: 30rpx;
		cursor: pointer;
	}

	.active {
		background-color: white;
		color: red;
		border-radius: 30rpx;
		border: 2rpx solid red;
		padding: 3%;
		width: 105%;
		height: 50rpx;
	}

	.tab::after {
		content: none;
	}

	.qh2 {
		width: 96%;
		display: flex;
		background-color: white;
		padding: 2%;
	}

	.daybox {
		width: 25%;
		text-align: center;
		font-size: 20rpx;
		color: black;
	}

	.riqi {
		display: flex;
		padding: 2%;
	}

	.text1 {
		font-size: 30rpx;
		margin-right: 3%;
		color: #7e7e7e;
	}

	.text2 {
		font-size: 30rpx;
		color: red;
	}

	.box {
		width: 96%;
		display: flex;
		padding: 2%;
	}

	.team {
		width: 35%;
		padding: 2.5%;
	}

	.teamnr1 {
		display: flex;
		padding: 2%;
	}

	.image1 {
		width: 25%;
		margin-right: 4%;
	}

	.img1 {
		width: 100%;
		height: 60rpx;
	}

	.text3 {
		font-size: 32rpx;
	}

	.teamnr2 {
		/* font-size: 37rpx; */
		padding: 2%;
	}

	.text4 {
		font-size: 20rpx;
		color: #7e7e7e;
	}

	.bifen {
		width: 16%;
		padding: 2%;
	}

	.text5 {
		font-size: 45rpx;
		color: red;
	}

	.text6 {
		font-size: 24rpx;
		color: red;
	}
</style>
